// Name:            Button
//
// Description:     Define style for buttons
//
// Component:       `.am-btn`
//
// Sub-objects:     `.am-btn-group`
//                  `.am-btn-dropdown`
//
// Modifiers:       `.am-btn-default`
//                  `.am-btn-primary`
//                  `.am-btn-warning`
//                  `.am-btn-success`
//                  `.am-btn-danger`
//                  `.am-btn-secondary`
//                  `.am-btn-link`
//                  `.am-btn-sm`
//                  `.am-btn-lg`
//                  `.am-btn-xs`
//                  `.am-btn-block`
//
// States:          `.am-active`
//                  `.am-disabled`
//
// =============================================================================

/* ==========================================================================
   Component: Button
 ============================================================================ */

// Button base styles
.@{ns}btn {
    display: inline-block;
    margin-bottom: 0; // for input.am-btn
    padding: 0.5em 1em; // relative font size
    vertical-align: middle;
    font-size: @btn-font-size;
    font-weight: @btn-font-weight;
    line-height: @btn-line-height;
    text-align: center;
    white-space: nowrap;
    background-image: none;
    border: 1px solid transparent;
    border-radius: @global-radius;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    user-select: none;
    transition: background-color 300ms ease-out, border-color 300ms ease-out;
    .hook-btn;
    &, &:active {
        &:focus {
            .tab-focus();
        }
    }
    &:hover, &:focus {
        color: @btn-default-color;
        text-decoration: none;
        .hook-btn-hover;
    }
    &:active, &.@{ns}active {
        background-image: none;
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .15);
        .hook-btn-active;
    }
    &.@{ns}disabled, &[disabled], fieldset[disabled] & {
        // https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
        pointer-events: none; // Disable mouse events
        border-color: transparent;
        cursor: not-allowed; // may not styled because pointer-events: none;
        opacity: 0.45;
        box-shadow: none;
        .hook-btn-disable;
    }
    &.@{ns}round {
        border-radius: @global-rounded;
    }
    &.@{ns}radius {
        border-radius: @radius-normal;
    }
}

// Modifiers
// =============================================================================
.@{ns}btn-default {
    .button-variant(@btn-default-color;
    @btn-default-bg;
    @btn-default-border);
    .hook-btn-default;
}

.@{ns}btn-primary {
    .button-variant(@btn-primary-color;
    @btn-primary-bg;
    @btn-primary-border);
    .hook-btn-primary;
}

.@{ns}btn-secondary {
    .button-variant(@btn-secondary-color;
    @btn-secondary-bg;
    @btn-secondary-border);
    .hook-btn-secondary;
}

.@{ns}btn-warning {
    .button-variant(@btn-warning-color;
    @btn-warning-bg;
    @btn-warning-border);
    .hook-btn-warning;
}

.@{ns}btn-danger {
    .button-variant(@btn-danger-color;
    @btn-danger-bg;
    @btn-danger-border);
    .hook-btn-danger;
}

.@{ns}btn-success {
    .button-variant(@btn-success-color;
    @btn-success-bg;
    @btn-success-border);
    .hook-btn-success;
}


/* Style links like a button */

.@{ns}btn-link {
    color: @link-color;
    font-weight: normal;
    cursor: pointer;
    border-radius: 0;
    &, &:active, &[disabled], fieldset[disabled] & {
        background-color: transparent;
        box-shadow: none;
    }
    &, &:hover, &:focus, &:active {
        border-color: transparent;
    }
    &:hover, &:focus {
        color: @link-hover-color;
        text-decoration: underline;
        background-color: transparent;
    }
    &[disabled], fieldset[disabled] & {
        &:hover, &:focus {
            color: @btn-link-disabled-color;
            text-decoration: none;
        }
    }
}


/* button size */

.@{ns}btn-xs {
    .button-size(@btn-xs-font-size);
    .hook-btn-xs;
}

.@{ns}btn-sm {
    .button-size(@btn-sm-font-size);
    .hook-btn-sm;
}

.@{ns}btn-lg {
    .button-size(@btn-lg-font-size);
    .hook-btn-lg;
}

.@{ns}btn-xl {
    .button-size(@btn-xl-font-size);
    .hook-btn-xl;
}


/* Block button  */

.@{ns}btn-block {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}


/* Multiple block buttons vertically space */

.@{ns}btn-block+.@{ns}btn-block {
    margin-top: 5px;
}


/* Specificity overrides */

input[type="submit"], input[type="reset"], input[type="button"] {
    &.@{ns}btn-block {
        width: 100%;
    }
}


/* Button with loading spinner */

.@{ns}btn.@{ns}btn-loading {
    .@{ns}icon-spin {
        margin-right: 5px;
    }
}

// Hooks
// =============================================================================
.hook-btn() {}

.hook-btn-hover() {}

.hook-btn-active() {}

.hook-btn-disable() {}

.hook-btn-default() {}

.hook-btn-primary() {}

.hook-btn-warning() {}

.hook-btn-danger() {}

.hook-btn-success() {}

.hook-btn-secondary() {}

.hook-btn-xs() {}

.hook-btn-sm() {}

.hook-btn-xl() {}

.hook-btn-lg() {}
